<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件通信</title>
    <style type="text/css">
        header { margin: 15px 0; border-bottom: 1px solid #dfdfdf;}
        .cart { margin: 15px auto ; border: 1px solid blue ; width: 80vw; }
        .item { display: flex ; margin: 10px ; }
        .item>span { flex-basis: 15% ; }
        .item>span:nth-child(2) { flex-basis: 25%; }
        .total { display: flex; justify-content: flex-end; margin: 15px auto ; border: 1px solid blue ; width: 80vw; }
        .total>span { flex-basis: 30%; }
    </style>
</head>
<body>

    <header>
        <a href="index.html">返回首页</a>
    </header>

    <div id="root">
        <cart class="cart"></cart>
        <total class="total"></total>
    </div>

    <script src="vue.global.js"></script>
    <script src="bus.js"></script>

    <script>
        // 创建一个中央事件总线
        const bus = new Bus();

        const cart = {
            template: `<div>
                            <div class="item" v-for="(item,index) in items" :key="item.id">
                                <span>{{ index + 1 }}</span>
                                <span>{{ item.name }}</span>
                                <span>{{ item.price }}</span>
                                <span>{{ item.number }}</span>
                                <span>{{ item.price * item.number }}</span>
                                <span>
                                    <a @click="remove(item.id)">删除</a>
                                </span>
                            </div>
                       </div>`,
            data(){
                return {
                    items: [
                        { id: 101 , name: '红米10A' , price: 699 , number: 1 },
                        { id: 202 , name: '魅蓝10' , price: 899 , number: 1 },
                        { id: 303 , name: '荣耀X10' , price: 1899 , number: 1 }
                    ]
                }
            },
            methods: {
                remove(id){
                    let index = this.items.findIndex( item => item.id == id );
                    if( index != -1 ) {
                        this.items.splice( index , 1 );
                        this.sum();
                    }
                },
                sum(){
                    // 重新计算总价格
                    let total = this.items.reduce( (p,c) => p + c.price * c.number , 0 );
                    // 通过中央事件总线触发事件
                    bus.emit( '算账' , total );
                }
            },
            // 生命周期钩子
            beforeMount(){
                console.log( '这是在 cart 组件挂载之前输出的' );
            },
            // 生命周期钩子
            mounted(){
                console.log( `在 cart 组件挂载完毕后触发"算账"事件`);
                this.sum();
            }
        }

        const total = {
            template: `<div>
                            <span>{{ total }}</span>
                       </div>`,
            data(){
                return { total: 0 }
            },
            methods: {
                handle(value){
                    this.total = value ;
                }
            },
            // 生命周期钩子
            beforeMount(){
                console.log( '在 total 组件挂载之前就添加监听器' );
                // 通过中央事件总线来监听事件
                bus.on( '算账' , this.handle );
            },
            // 生命周期钩子
            mounted(){
                console.log( 'total 组件挂载完毕, total: ' , this.total );
            }
        }

        const options = {
            components: {
                'cart': cart,
                'total': total
            },
            // 生命周期钩子
            beforeMount(){
                console.log( '在根组件挂载之前输出的' );
            },
            // 生命周期钩子
            mounted(){
                console.log( '在根组件挂载完毕输出的');
            }
        }

        const app = Vue.createApp(options);
        const root = app.mount('#root');
    </script>
    
</body>
</html>